<template>
	<el-row>
		<el-col :span="12">
			<img class="loginImg" src="../assets/shuidianfei.jpg">
		</el-col>

	<el-col :span="12">
			<div class="title"><img class="head" src="../assets/head2.gif"></div>
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
				<!-- 输入用户名 -->
        	<div class="myInput username1">
					<el-form-item prop="tel">
						<el-input class="myInput1 myInput2" prefix-icon="el-icon-user" v-model="ruleForm.username" placeholder="请输入用户名" clearable></el-input>
					</el-form-item>
				</div>
				<!-- 输入密码 -->
				<div class="myInput password">
					<el-form-item prop="pass">
						<el-input class="myInput1 myInput2" prefix-icon="el-icon-magic-stick" placeholder="请输入密码" v-model="ruleForm.PASSWORD" show-password></el-input>
					</el-form-item>
				</div>
				<!-- 确认密码 -->
        	<div class="myInput password">
					<el-form-item prop="pass">
						<el-input class="myInput1 myInput2" prefix-icon="el-icon-magic-stick" placeholder="请确认输入密码" v-model="ruleForm.verify" show-password></el-input>
					</el-form-item>
				</div>

				<!-- 输入电话号码 -->
				<div class="myInput password">
					<el-form-item prop="tel">
						<el-input class="myInput1 myInput2" prefix-icon="el-icon-phone" v-model="ruleForm.telephone" placeholder="请输入有效电话号码" clearable></el-input>
					</el-form-item>
				</div>
				<div class="login">
					<el-form-item>
						<el-button class="logBtn" @click="submitForm('ruleForm')">注册</el-button>
					</el-form-item>
				</div>
			</el-form>
			<div class="link">
				<el-link type="info" @click="toReg()">已注册，去登录！</el-link>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import axios from 'axios'
    import myapi from '../api'
	export default {
    name:'Register',
		data() {
			// <!--验证手机号是否合法-->
			let validateName = (rule, value, callback) => {
				if (value === '') {
					callback(new Error(" "))
				} else {
					if (this.ruleForm.checkPass !== "") {
						this.$refs.ruleForm.validateField("checkPass");
					}
					callback()
				}
			}
			// <!--验证密码-->
			let validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error(" "))
				} else {
					if (this.ruleForm.checkPass !== "") {
						this.$refs.ruleForm.validateField("checkPass");
					}
					callback()
				}
			}

			return {
				ruleForm: {
					
					verify:'',
					PASSWORD: '',
					username: '',
					email:'',
					telephone:'',
					gender: '男',
		  			introduce: '',
				},
				rules: {
					PASSWORD: [{
						validator: validatePass,
						trigger: 'change'
					}],
					username: [{
						validator: validateName,
						trigger: 'change'
					}],
				},
			}
		},
		methods: {
			// 验证手机号
			checkMobile(str) {
				let re = /^1\d{10}$/
				if (re.test(str)) {
					return true;
				} else {
					return false;
				}
			},
			//验证邮箱
			checkemail(str){
				let re=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(re.test(str)){
					return true;
				} else{
					return false;
				}
			},
			// <!--提交登录-->
		submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						axios.post(myapi.reguster.url,{user:this.ruleForm})
                    				    .then(response => { //用户名和密码将转为json传到后台接口              
							let res = response.data; //用res承接返回后台的json文件(像使用数组那样)
							if (res.code == 17) { //显示登录结果             
								console.log('注册成功');
								this.$message({
									showClose: true,
									message: '注册成功！',
									type: 'success',
									center: true
								});
								
								this.$cookies.set("status","logined");
								this.$cookies.set("ID",this.ruleForm.username);
								this.$router.push({
									path: '/login'
								});
							} else if(res.code==25){
								console.log('注册失败');
								this.$message({
									showClose: true,
									message: '注册失败！请稍后重试！',
									type: 'error',
									center: true
								});
							}
						});
					} else {
						console.log("账号或密码错误！");
						return false;
					}
				})
			},
			toReg() {
				this.$router.push({
					path: '/login'
				})
            },
            toRear() {
				this.$router.push({
					path: 'rear/login'
				})
			}
		}
	}
	</script>
<style>
	.logo {
		margin: 0 auto;
	}

	.loginImg {
		width: 700px;
		margin: 0 auto;
		float: right;
	}

	/* ------------------------------ */

	.title {
		margin-top: 5%;
		width: 100%;
		text-align: center;
	}

	.head {
		width: 350px;
	}

	.username1 {
		width: 40%;
		margin-top: 6%;
		margin-left: auto;
		margin-right: auto;
	}

	.password {
		width: 40%;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
	}
  .radio{
    width: 40%;
    margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
  }
  .sex{
     width: 40%;
    margin-top: 10px;
  }

	.login {
		margin-top: 8%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.logBtn {
		width: 150px;
		height: 40px;
		border-radius: 25px;
		border: none;
		outline: none;
		background-color: #4F6E9D;
		color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.logBtn:focus,.logBtn:hover {
		color: #FFFFFF;
		border-color: #7E9DCA;
		background-color: #7E9DCA;
	}
	
	.logBtn:active {
		color: #FFFFFF;
		border-color: #7E9DCA;
		outline: 0;
	}

	.link {
		margin-top: 6%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
</style>